<template>
  <div>
    <el-form :model="form">
        form:{{form}}
        <el-form-item label="菜单名称" label-width="120px" :rules="[
      { required: true}]">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" label-width="120px" :rules="[
      { required: true}]">
          <el-select v-model="form.pid" placeholder="请选择上级菜单" @change="changePid">
            <el-option label="顶级菜单" :value="0"></el-option>

            <el-option v-for="item in menu_Arr" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" label-width="120px">
          <el-radio v-model="form.type" :label="1" disabled>目录</el-radio>
          <el-radio v-model="form.type" :label="2" disabled>菜单</el-radio>
        </el-form-item>

        <el-form-item label="菜单图标" label-width="120px" v-if="form.type===1">
          <el-select v-model="form.icon" placeholder="请选择菜单图标">
            <el-option v-for="item in icons" :key="item" :value="item">
              <i :class="item"></i>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单地址" label-width="120px" v-else>
          <el-select v-model="form.url" placeholder="请选择菜单地址">
            <el-option
              v-for="item in IndexRoutes"
              :key="item.path"
              :label="item.meta[item.meta.length - 1].title"
              :value="'/'+item.path"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" label-width="120px">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
        <el-form-item label-width="120px">
          <el-button type="primary" @click="commit">{{$route.path == '/menu/add'? '添加':'修改'}}</el-button>
        </el-form-item>

      </el-form>
      
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {IndexRoutes} from '../../../router/index';
import {reqmenuadd,reqmenuedit,reqmenuinfo} from '../../../http/api';
import { successAlert } from '../../../utils/alert';
export default {
  computed: {
    ...mapGetters({
      menu_Arr:'menu_Arr'
    })
  },
  data() {
    return {
        form:{
        title: "",
        pid: "",
        icon: "",
        type: "",
        url: "",
        status: ""
    },
      IndexRoutes,
       //  3.1 初始化表单数据
      icons: [
        "el-icon-setting",
        "el-icon-user-solid",
        "el-icon-s-goods",
        "el-icon-camera-solid"
      ],
    };
  },
  activated() {
    this.set_menuArr();
    if(this.$route.path !== "/menu/add"){
      // console.log(this.$route);
      reqmenuinfo({ id:this.$route.params.id }).then((res) => {
            if (res.data.code === 200) {
                this.form = res.data.list
            }
        }).catch((err) => {
            console.log('请求失败-----err:' + err);
        })
    }
  },
  beforeRouteLeave(to,from,next){
    // console.log(to,from);
    if(from.path !== '/menu/add'){
        this.form = {
        title: "",
        pid: "",
        icon: "",
        type: "",
        url: "",
        status: ""
    }
    };
    next()
    },
  
  methods: {
    ...mapActions({
      set_menuEditInfo:'set_menuEditInfo',
      set_menuArr:'set_menuArr'
    }),
   changePid(){
      if(this.form.pid===0){
        this.form.type=1
      }else{
        this.form.type=2
      }
   },
   commit(){
     if(this.$route.path === '/menu/add'){
       reqmenuadd(this.form).then(res => {
        if(res.data.code===200){
          //弹成功
          successAlert(res.data.msg);
          this.form = {
              title: "",
              pid: "",
              icon: "",
              type: "",
              url: "",
              status: ""
          };
          //返回菜单管理
          this.$router.push('/menu');
        }
      })
     }else{
       this.form.id = this.$route.params.id;
       reqmenuedit(this.form).then(res => {
        if(res.data.code===200){
          //弹成功
          successAlert(res.data.msg);
          //返回菜单管理
          this.$router.push('/menu');
        }
      })
     }
   }
  }
};
</script>
<style scoped lang="less">

</style>